<template>
  <div class="home">
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="success" size="small">small按钮</Button>
    <Button type="danger">危险按钮</Button>
    <Button type="danger" disabled>禁用按钮</Button>
    <Button round>圆角按钮</Button>
    <Button circle>圆形按钮</Button>
    <Button size="large">large按钮</Button>
    <Button type="primary" loading>loading</Button>
    <br />
    <br />
    <Button type="success" block>长按钮</Button>

    <br />
    <br />
    <Message>默认message</Message>
    <Message
      type="success"
    >成功message成功message成功message成功message成功message成功message成功message成功message成功message</Message>
    <Button @click="showMessage">触发message</Button>
    <br />
    <br />
    <Swiper></Swiper>

    <Row>
      <Col />
    </Row>
    <Row>
      <Col :span="12" />
      <Col :span="12" />
    </Row>
    <Row>
      <Col :span="8" offset="8" />
      <Col :span="8" />
    </Row>
    <Row>
      <Col :xs="24" :sm="12" :md="8" :lg="6">1</Col>
      <Col :xs="24" :sm="12" :md="8" :lg="6">2</Col>
      <Col :xs="24" :sm="12" :md="8" :lg="6">3</Col>
      <Col :xs="24" :sm="12" :md="8" :lg="6">4</Col>
    </Row>
    <Row>
      <Col :span="4" />
      <Col :span="4" />
      <Col :span="4" />
      <Col :span="4" />
      <Col :span="4" />
      <Col :span="4" />
    </Row>

    <Count-to endVal="100"></Count-to>

    <data-card icon="el-icon-user-solid" :num="100" text="新增用户" description="查看更多"></data-card>
    <data-card icon="el-icon-s-goods" color="#54ade8" :num="168" text="新增商品"></data-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: ["张三", 2, "ewew", "3232"]
    };
  },
  mounted() {
    console.log('111')
  },
  methods: {
    showMessage() {
      this.$message({ type: "success", message: "message组件" });
    }
  }
};
</script>
